<template>
  <div class="_wrap">
    <div class="tags">
      <div class="item" v-for="(item, i) in tags" :key="i" :class="{cur: curTab === item.value}" @click="tabClick(item.value)">
        <span>{{item.label}}</span>
        <span>{{item.num}}</span>
      </div>
    </div>
    <div class="_table">
      <seamlessScroll ref="seamlessScroll" :data="tableData"
                      :tooltip="true"
                      :class-option="classOption">
        <div class="item" v-for="(item, i) in tableData" :key="i">
          <div class="inner">
            <el-tooltip effect="dark" :content="item.name" placement="top-start">
              <div class="name">{{item.name}}</div>
            </el-tooltip>
            <div class="date">{{item.date}}</div>
          </div>
        </div>
      </seamlessScroll>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'itemRightTop',
    components: {  },
    data() {
      return {
        curTab: 0,
        tags: [
          { label: '初稿', num: 9, value: 0 },
          { label: '校签', num: 9, value: 1 },
          { label: '局签', num: 9, value: 2 },
          { label: '批复', num: 9, value: 3 }
        ],
        tableData:[
          { name: '横店高中新建项目-[变更报告-4]，批复未出', date: '2024-04-17' },
          { name: '南马高中综合楼报告厅新建项目-[变更报告-2]', date: '2024-04-17' },
          { name: '横店高中新建项目-[变更报告-3]，批复未出', date: '2024-04-10' },
          { name: '吴宁第七小学新建项目-[变更报告-10]，批', date: '2024-04-10' },
          { name: '江北三中新建项目-[变更报告-3]，批复未出', date: '2024-03-27' },
          { name: '横店高中新建项目-[变更报告-13]，批复未出', date: '2023-11-16' }
        ],
        classOption: {
          // autoPlay: false,
          limitMoveNum: 7, // 开启无缝滚动的数据量 Number
          singleHeight: 56, // 单步运动停止的高度(默认值0是无缝不停止的滚动)
          waitTime: 2000, // 单步停止等待时间(默认值1000ms)
        }
      }
    },
    mounted() {
    },
    methods: {
      tabClick(val){
        // this.curTab = val
        // 获取对应数据
      },
      rowClick(row, column){
        console.log(row, column, column.$index)
      },
    }
  }
</script>

<style scoped lang="scss">
  ._wrap {
    width: 100%; height: 100%;
    .tags {
      padding-bottom: 15px;
      /*display: flex; align-items: center; justify-content: center;*/
      display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 4px;
      .item {
        height: 30px; background: #0D2246; border: 1px solid rgba(9,80,138,1); border-radius: 4px;
        font-size: 16px; font-family: PingFangSC; color: rgba(255,255,255,.72); padding: 0 8px;
        display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: all .3s;
        &.cur {
          color: #ABF1FF; border: 1px solid rgba(83,226,255,1);
        }
      }
    }
    ._table {
      height: 330px; overflow: hidden; position: relative;
      &:before {
        content: ''; display: flex; position: absolute; top: 0; left: 9px;
        width: 8px; height: 100%; background: url('~@/assets/imgSchoolHouse/timeBg.svg') no-repeat;
      }
      .item {
        background: url('~@/assets/imgSchoolHouse/itemBg.svg') -6px center no-repeat;
        background-size: 100% auto;
        margin-bottom: 6px;
        .inner {
          display: flex; align-items: center; justify-content: space-between;
          height: 50px; padding-left: 40px; padding-right: 18px; font-family: PingFangSC;
          .name {
            margin-right: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
          }
          .date {
            min-width: 86px; text-align: right;
            font-size: 14px; color: rgba(255,255,255,.72);
          }
        }
      }
    }
  }
</style>
